<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 子组件父组件传值</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 挂载点，模板，实例之间的关 -->
		<div id="root">
			<input v-model="inputValue" />
			<button @click="handleClick">提交</button>
			<ul>
				<!-- <li v-for="(item ,index) of list " :key=index>{{item}}</li> -->
				<todo-item v-for="(item ,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete">
				</todo-item>
			</ul>
		</div>
		<script>
			//全局组件
			Vue.component('todo-item', {
				props: ['content', 'index'],
				template: '<li @click="handleClick">{{content}}</li>',
				methods: {
					handleClick() {
						this.$emit('delete', this.index);
					}
				}
			})
			new Vue({
				el: "#root",
				data: {
					inputValue: "",
					list: [],
				},
				methods: {
					handleClick() {
						this.list.push(this.inputValue);
						this.inputValue = "";
					},
					handleDelete(index) {
						this.list.splice(index,1)
					}
				}

			})
		</script>
	</body>
</html>
